<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表过渡</title>
</head>
<style>
    li {
        width: 100%;
        border: 1px dotted black;
        margin: 5px;
        line-height: 35px;
        padding-left: 10px;
    }

    .v-enter,
    .v-leave-to {
        opacity: 0;
        transform: translateY(100px);
    }

    .v-enter-active,
    .v-leave-active {
        transition: all 1s ease;
    }
    
    .v-move {
        transition: all 1s ease;
    }

    .v-leave-active {
        position: absolute;
    }

    li:hover {
        background-color: pink;
        transition: all 1s ease
    }
</style>
<body>

    <div id="app">
        
         <label for="">
             id:
             <input type="text" v-model="id">
         </label>
         <label for="">
             name:
             <input type="text" v-model="name">
         </label>

         <input type="button" value="添加" @click="add">

         <transition-group tap="ul">
             <li v-for="(item,index) in list" :key="item.id" @click='dian(index)' >
                 {{item.id}}-------{{item.name}}
             </li>
         
         </transition-group>
    </div>
</body>
<script src='../../vue文件/vue.js'></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            id:'',
            name:'',
            list:[
                {id:1,name:'张三',age:20},
                {id:2,name:'张四',age:18},
                {id:3,name:'张五',age:22},
                {id:4,name:'张六',age:24},
            ]

        },
        methods: {
            add() {
                    if (this.id != '' && this.name != '') {
                        // 在末尾添加
                        this.list.push({ id: this.id, name: this.name })
                        this.id = this.name = ''
                    }

                },
            dian(index){
                this.list.splice(index,1)
            }
        }
    })
</script>
</html>